<template>
  <div class="add-container">
    <div class="form-container">
      <h2 style="text-align: center">FIXTURE NOTE</h2>
      <el-form :model="formParam" :rules="rules" ref="custForm">
        <div class="clearfix">
          <el-row class="header-title" justify="end">
            <el-col>
              <el-form-item label="Date" label-width="180px" style="float: right">
                <el-date-picker v-model="formParam.fixtureDate" value-format="YYYY-MM-DD" type="date"
                  placeholder="Select Date" style="width: 250px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="header-title" justify="end">
            <el-col>
              <el-form-item label="No." label-width="180px" style="float: right">
                <span style="display: inline-block; width: 250px">{{ formParam.fixtureNo }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>1</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="CHARTERER" label-width="180px" prop="clientName" required>
              {{ formParam.clientName }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>2</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="OWNER" label-width="180px" prop="carrierName" required>
              <span>{{ formParam.carrierName }}</span>
              <!-- <el-select v-model="formParam.carrierName" filterable placeholder="choose">
                <el-option :key="item.carrierName" :label="item.carrierName" :value="item.carrierName"
                  v-for="item in carriers">
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>3</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23" class="flex-content">
            <el-form-item label="VESSEL" label-width="180px" prop="vesselName" required>
              MV
              <el-select v-model="formParam.vesselName" style="display: inline-block" clearable filterable
                placeholder="choose Vessel" @change="selectVessel">
                <el-option :key="item.vesselName" :label="item.vesselName" :value="item.vesselName"
                  v-for="item in vessels" />
              </el-select>

              <el-select v-model="formParam.voyageNo" style="display: inline-block" clearable filterable
                placeholder="choose Voyage" @change="selectPortCode">
                <el-option :key="item.voyageNo" :label="item.voyageNo" :value="item.voyageNo"
                  v-for="item in voyages" />
              </el-select>
              OR SUB OWNER’S GUARANTEE CARRYING VESSEL IS SUBJECT TO THE INTERNATIONAL SAFETY MANAGEMENT CODE (ISM) AND
              INTERNATIONAL SHIPPING AND PORT SECURITY SAFETY CODE (ISPS)
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>4</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23" style="display: flex">
            <el-form-item label="CARGO & READINESS" label-width="180px">
              <!-- ABOUT <span style="width: 120px;"><el-input type="number" v-model="formParam.units"></el-input></span>
              UNITS
              <el-select v-model="formParam.cargoType" filterable clearable allow-create>
                <el-option v-for="item in cargo_type" :key="item.label" :label="item.label" :value="item.label" />
              </el-select> 
              AROUND&nbsp;<el-input-number v-model="formParam.totalCbm" :precision="2" /> CBM, CARGO TO BE
              READY BY <el-date-picker value-format="YYYY-MM-DD" v-model="formParam.readinessDate" type="date"
                placeholder="Pick dates" style="width: 120px;margin:0 4px;" /> -->
              <el-input v-model="formParam.readiness" type="textarea" rows="3" style="width: 600px" />
              <span>
                <PreViewImageUpload :record="recordData" :photos="
                    Array.isArray(formParam.cargoList) ? formParam.cargoList : formParam.cargoList ? [formParam.cargoList] : []
                  " :accept="accept" :isAllAccept="false" :url="uploadUrl" :id="recordData.fixtureId"
                  :isTable="isTable" @onSuccess="submitUploadForm" />
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>5</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="DIMENSION SURVEY" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 5" type="textarea" rows="3" v-model="formParam.clause5"
                  style="width: 1000px" @blur="editNote(5)"></el-input>
                <div v-else>{{ formParam.clause5 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 5" @click="editTrue(5)" />
                    <Edit v-else @click="editNote(5)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>6</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="LOADING PORT" label-width="180px" prop="pol" required>
              <el-select v-model="formParam.pol" filterable clearable allow-create placeholder="choose port">
                <el-option :key="item.fullPortName" :label="item.fullPortName" :value="item.fullPortName"
                  v-for="item in pols" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>7</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="12">
            <el-form-item label="LAYCAN" label-width="180px" prop="laycan" required>
              <el-date-picker type="daterange" start-placeholder="Start date" end-placeholder="End date"
                format="YYYY-MM-DD" v-model="formParam.laycan" class="ipt" @change="datePickChange" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>8</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="DISCHARGING PORT" label-width="180px" prop="pod" required>
              <el-select v-model="formParam.pod" filterable clearable allow-create placeholder="choose port">
                <el-option :key="item.fullPortName" :label="item.fullPortName" :value="item.fullPortName"
                  v-for="item in pods" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>9</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="TRANSSHIPMENT" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 9" type="textarea" rows="3" v-model="formParam.clause9"
                  style="width: 1000px" @blur="editNote(9)"></el-input>
                <div v-else>{{ formParam.clause9 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 9" @click="editTrue(9)" />
                    <Edit v-else @click="editNote(9)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>10</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="FREIGHT RATE" label-width="180px" required>
              <div class="">
                <span>$
                  <el-form-item prop="freightRate" required style="display: inline-block">
                    <el-input style="width: 180px" type="number" v-model="formParam.freightRate"
                      @blur="freightRateBlur" />
                  </el-form-item>
                  PER CBM,
                  <el-form-item prop="shippingTerms" required style="display: inline-block">
                    <el-select v-model="formParam.shippingTerms" clearable filterable style="width: 100px">
                      <el-option v-for="(item, index) in shippingTermsList" :key="index" :label="item" :value="item" />
                    </el-select>
                  </el-form-item>
                  , NET</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>11</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="FREIGHT PAYMENT" label-width="180px" prop="" required>
              <div class="note-content">
                <el-input v-if="editId == 11" type="textarea" rows="3" v-model="formParam.clause11"
                  style="width: 1000px" @blur="editNote(11)"></el-input>
                <div v-else>{{ formParam.clause11 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 11" @click="editTrue(11)" />
                    <Edit v-else @click="editNote(11)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>12</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="TAXES / DUES" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 12" type="textarea" rows="3" v-model="formParam.clause12"
                  style="width: 1000px" @blur="editNote(12)"></el-input>
                <div v-else>{{ formParam.clause12 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 12" @click="editTrue(12)" />
                    <Edit v-else @click="editNote(12)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1">      
              <el-checkbox v-model="duesechecked">
              <template #default>
                <span>13</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="DEMURRAGE" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 13" type="textarea" rows="3" v-model="formParam.clause13"
                  style="width: 1000px" @blur="editNote(13)"></el-input>
                <div v-else>{{ formParam.clause13 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 13" @click="editTrue(13)" />
                    <Edit v-else @click="editNote(13)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>14</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="DEADFREIGHT" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 14" type="textarea" rows="3" v-model="formParam.clause14"
                  style="width: 1000px" @blur="editNote(14)"></el-input>
                <div v-else>{{ formParam.clause14 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 14" @click="editTrue(14)" />
                    <Edit v-else @click="editNote(14)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>15</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="AGENCY " label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 15" type="textarea" rows="3" v-model="formParam.clause15"
                  style="width: 1000px" @blur="editNote(15)"></el-input>
                <div v-else>{{ formParam.clause15 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 15" @click="editTrue(15)" />
                    <Edit v-else @click="editNote(15)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>16</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="BILL OF LADING" label-width="180px" prop="" required>
              <div class="note-content">
                <el-input v-if="editId == 16" type="textarea" rows="3" v-model="formParam.clause16"
                  style="width: 1000px" @blur="editNote(16)"></el-input>
                <div v-else>{{ formParam.clause16 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 16" @click="editTrue(16)" />
                    <Edit v-else @click="editNote(16)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>17</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="LOADING MATERIAL" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 17" type="textarea" rows="3" v-model="formParam.clause17"
                  style="width: 1000px" @blur="editNote(17)"></el-input>
                <div v-else>{{ formParam.clause17 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 17" @click="editTrue(17)" />
                    <Edit v-else @click="editNote(17)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>18</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="ARBITRATION" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 18" type="textarea" rows="3" v-model="formParam.clause18"
                  style="width: 1000px" @blur="editNote(18)"></el-input>
                <div v-else>{{ formParam.clause18 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 18" @click="editTrue(18)" />
                    <Edit v-else @click="editNote(18)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>19</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="CONFIDENTIALITY" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 19" type="textarea" rows="3" v-model="formParam.clause19"
                  style="width: 1000px" @blur="editNote(19)"></el-input>
                <div v-else>{{ formParam.clause19 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 19" @click="editTrue(19)" />
                    <Edit v-else @click="editNote(19)" />
                  </el-icon>
                </span>
               
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>20</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="AGREEMENT PERIOD" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 20" type="textarea" rows="3" v-model="formParam.clause20"
                  style="width: 1000px" @blur="editNote(20)"></el-input>
                <div v-else>{{ formParam.clause20 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 20" @click="editTrue(20)" />
                    <Edit v-else @click="editNote(20)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox v-model="clausesCheckedOne" @change="clausesCheckedTwo = !clausesCheckedOne">
              <template #default>
                <span>21</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="OTHER CLAUSES" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 21" type="textarea" rows="3" v-model="formParam.clause21"
                  style="width: 1000px" @blur="editNote(21)"></el-input>
                <div v-else>{{ formParam.clause21 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 21" @click="editTrue(21)" />
                    <Edit v-else @click="editNote(21)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox v-model="clausesCheckedTwo" @change="clausesCheckedOne = !clausesCheckedTwo">
              <template #default>
                <span>22</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="OTHER CLAUSES" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 22" type="textarea" rows="3" v-model="formParam.clause22"
                  style="width: 1000px" @blur="editNote(22)"></el-input>
                <div v-else>{{ formParam.clause22 }}</div>
                <span>
                  <el-icon>
                    <Finished  v-if="editId == 22" @click="editTrue(22)" />
                    <Edit v-else @click="editNote(22)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="cancelForm">{{ $t("ship.button.cancel") }}</el-button>
        <el-button type="primary" :loading="isLoading" @click="submitForm">Submit</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import moment from "moment";
  import { ref, onMounted, reactive, computed, watch, getCurrentInstance } from "vue";
  import { useRouter } from "vue-router";
  import service from "@/utils/request";
  import { downloadFile } from "@/utils/downloadFile";
  import PreViewImageUpload from "@/components/ImageUpload/PreViewImageUpload.vue";
  import { ElMessage } from "element-plus";
  const { proxy } = getCurrentInstance();
  const route = useRoute();
  const router = useRouter();
  import { ElNotification, ElMessageBox } from "element-plus";

  const templateTypes = ["Standard", "AICC"];
  const custForm = ref(null);
  const dialogTitle = ref("");
  const shippingTermsList = ref(["FLT", "FIO", "FILO", "LIFO"]);

  const uploadUrl = "shipping/fixtureNote/upload";
  const isTable = false;
  const accept = ".xlsx,.xls";
  const initForm = {
    fixtureNo: null,
    clientName: null,
    carrierCode: null,
    carrierName: null,
    vesselName: null,
    voyageNo: null,
    clientCode: null,
    contactName: null,
    pol: null,
    pod: null,
    paymentDay: null,
    ladingDay: null,
    email: null,
    laycanStart: null,
    laycanEnd: null,
    laycan: null,
    terms: <any>[],
    units: null,
    cargoType: null,
    totalCbm: null,
    readinessDate: null,
    shippingTerms: null,
    otherClauses: "",
    fixtureDate: moment(new Date()).format("YYYY-MM-DD"),
    signed: null,
    freightRate: null,
    detentionDay: null,
    deadFreightDay: null,
    fixtureId: null,
    readiness: null,
    readinessCN: null,
    cargoList: null
};

const freightRateBlur = () => {
  if (formParam.freightRate) {
        formParam.freightRate = Number(formParam.freightRate).toFixed(2);
  }
};
const clausesCheckedOne = ref(false);
const clausesCheckedTwo = ref(false);
const duesechecked = ref(false);

const terms = ref([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1,1, 1, 1, 0, 0]);

const formParam = reactive(Object.assign({ }, initForm));
const total = ref(0);
const statuss = ["UnApprove", "Approve", "Reject"];

const rules = ref({
  readiness: [{required: true, message: "readiness is required", trigger: "blur" }]
});

let showForm = route.query?.showForm;

let vessels = reactive([]);
let voyages = reactive([]);
let pols = reactive([]);
let pods = reactive([]);


const listData = ref([]);

const dialogFormVisible = ref(false);

let isAdd = false;

const editClickEvent = row => {
  if (row.templateType == 0) {
        localStorage.setItem("RECORD_DATA", JSON.stringify(row));
      router.push({path: "/contract/fixtureNote", query: {showForm: true,fixtureNo: row.fixtureNo } });
      showForm = true;
  } else {
        localStorage.setItem("RECORD_DATA1", JSON.stringify(row));
      router.push({path: "/contract/aiccFixtureNote" ,query: {fixtureNo: row.fixtureNo } });
      showForm = true;
  }
};
const recordData = ref();
// 编辑页面
const editId = ref(null);
const fixtureNoteClauseList = ref([]);
const getFixtureNoteClause = () => {
    service.get("/shipping/fixtureNoteClause", { type: 1 }).then(res => { 
      if (res.data) {
        res.data.forEach(item => {
          formParam["clause" + item.clauseId] = item.content;
        });
        fixtureNoteClauseList.value = res.data;
      }
    });
};

const editNote = id => {
  editId.value = id;
};
const editTrue = clauseId => {
  ElMessageBox.confirm(
    "Confirm to Save？",
    "Confirmation Information",
    {
      type: "warning",
      confirmButtonText: 'Save',
      cancelButtonText: 'Cancel'
    }
  ).then(async () => {
    editId.value = null;
      const content= formParam["clause" + clauseId]
      const id=fixtureNoteClauseList.value.find(item => item.clauseId == clauseId).id
      service.put("/shipping/fixtureNoteClause", {content, type: 1, clauseId ,id}).then(res => {
   if(res){
    ElNotification.success({
      title: "Prompt information",
      message: "Edit the data success!",
      position: "bottom-right",
    });
      }
    
  })
  });
       
};
const isFreight = ref(false);
watch(
  () => showForm,
  () => {
    if (showForm) {
      isFreight.value=route.query.isFreight
        recordData.value = JSON.parse(localStorage.getItem("RECORD_DATA"));
      Object.keys(recordData.value).forEach(key => {
        formParam[key] = recordData.value[key];
      });
      if (!formParam.fixtureDate) {
        formParam.fixtureDate = moment(new Date()).format("YYYY-MM-DD");
      }
      if (formParam.terms) {
        duesechecked.value = Boolean(formParam.terms[12]);
      clausesCheckedOne.value = Boolean(formParam.terms[20]);
      clausesCheckedTwo.value = Boolean(formParam.terms[21]);
      }
      if (formParam.laycanStart) {
        formParam.laycan = [formParam.laycanStart, formParam.laycanEnd];
      }
      getFixtureNoteClause();
      formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY \n ";
      formParam.readiness += "货物量约为 货物需在" +" " +"（具体日期或时间点）前准备就绪"; 
      let params={vesselName:formParam.vesselName, voyageNo:formParam.voyageNo,clientCode:formParam.clientCode}
      service.post("/shipping/fixtureNote/getAllFinishedByClient", params).then(res => {
        if (res) {
          formParam.pol = res.data.pol
          formParam.pod = res.data.pod 
          if(res.data.readiness){
                let readiness = res.data.readiness
                for (let i in readiness){                   
                  formParam.readiness += "ABOUT " +readiness[i].totalUnits +" UNITS OF " + readiness[i].brand +" , AROUND" + readiness[i].totalCbm+" CBM,CARGO TO BE READY BY\n "; 
                  formParam.readinessCN  +=  "货物量约为" + readiness[i].totalUnits +"辆"+ readiness[i].brand+",货物需在" +" " +"（具体日期或时间点）前准备就绪\n " ; 
                  
                }
                formParam.readiness += formParam.readinessCN
          }
          else{
              formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY \n ";
              formParam.readiness += "货物量约为 货物需在" +" " +"（具体日期或时间点）前准备就绪"; 
          }
      }
    })
    
  }
  },
  {immediate: true }
);


const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async valid => {
    if (!valid) {
      return;
    }
    if (!clausesCheckedOne.value && !clausesCheckedTwo.value) {
      ElMessage({
        message: "Please select at OTHER CLAUSES",
        type: "warning"
      });
      return;
    }
    terms.value[12] = Number(duesechecked.value);
    terms.value[20] = Number(clausesCheckedOne.value);
    terms.value[21] = Number(clausesCheckedTwo.value);
    formParam.terms = terms.value;
    formParam.otherClauses=clausesCheckedOne.value? formParam.clause21 : formParam.clause22;
    await service[isAdd ? "post" : "put"]("shipping/fixtureNote", formParam);

    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right"
    });
    dialogFormVisible.value = false;
    cancelForm();
  });
};
const cancelForm = () => {
  router.push({ path: "/freightForward/fixtureNote/list" });
  showForm = false;
};

const selectVessel = value => {
  voyages = (vessels.find(item => item.vesselName == value) || { schedules: [] }).schedules;
};


const selectPortCode = (value: any) => {
  formParam.pod = null;
  formParam.pol = null;
  pods = (voyages.find(item => item.voyageNo == value) || {pods: [] }).pods;
  pols = (voyages.find(item => item.voyageNo == value) || {pols: [] }).pols;
};

const datePickChange = (value: any) => {
  formParam.laycanStart = moment(value[0]).format("YYYY-MM-DD");
  formParam.laycanEnd = moment(value[1]).format("YYYY-MM-DD");
};

// 上传成功更新数据
const submitUploadForm = async data => {
        formParam.cargoList = data.url;
};

let cargo_type = reactive([]);
onMounted(async () => {
  result = await service.get("/shipping/schedule/getAllSchedule");
  if (result) {
    vessels = result.data;
  }

  const res = await proxy.useDict("cargo_type");
  cargo_type = res.cargo_type;
});
</script>
<style scoped lang="scss">
  .add-container {
    padding-top: 30px;
    background-color: #fafafa;
    min-height: 100%;
  }

  .form-container {
    margin: auto;
    padding: 40px;
    width: 90%;
    background-color: #fff;
  }

  .dialog-footer {
    margin: 60px auto 0;
    width: 100%;
    text-align: center;
  }

  .el-col>span {
    margin-left: 22px;
    line-height: 32px;
    font-size: 14px;
  }

  .flex-content .el-form-item__content {
    display: inline-block;
  }

  .el-checkbox {
    color: black;
  }

  .el-checkbox__label {
    margin-top: 2px;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
  }

  ::v-deep(.el-form-item__label) {
    font-weight: 400 !important;
  }

  .header-title {
    width: 100%;
  }

  .note-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
</style>